<div class='formulaire_spip' xmlns="http://www.w3.org/1999/html">
    [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
	[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
    
    <script>
    $(document).ready(function() {
        var ajax_sent = false;

        $('#groupes .delete_link').live('click', function(){
            if(!ajax_sent){
                ajax_sent = true;

                var id_groupe = $(this).attr('data-element-id');
                $.post('#CHEMIN{formulaires/ecatalogue_groupes/ecatalogue_groupes_ajax.php}',
                    {
                        action: "del",
                        id_groupe: id_groupe,
                        id_rubrique: '#ID_RUBRIQUE'
                    },
                    function(data){
                        data = $.parseJSON(data);
                        ajax_sent = false;
                        if(!data.error) {
                            $("#groupes .groupe-"+data.id_groupe).remove();

                            if(!$("#groupes tr").length) {
                                $("#groupes").append('<tr class="empty"><td><:ecatalogue:no_groupes:></td></tr>');
                            }
                            $(".add_groupe").append('<option value="'+data.id_groupe+'">'+data.titre+'</option>');
                        } else {
                            alert(data.error);
                        }
                    }
                );
            }
            return false;
        });

        $(".add_groupe").live('change', function() {
            if($(this).val()!='add') {
                $("#add_groupe_btn").css("display", "block");
            }else{
                $("#add_groupe_btn").css("display", "none");
            }
        });

        $("#add_groupe_btn").live('click', function() {
            if(!ajax_sent){
                ajax_sent = true;

                var id_groupe = $(".add_groupe").val();
                $.post('#CHEMIN{formulaires/ecatalogue_groupes/ecatalogue_groupes_ajax.php}',
                    {
                        action: "add",
                        id_groupe: id_groupe,
                        id_rubrique: '#ID_RUBRIQUE'
                    },
                    function(data){
                        data = $.parseJSON(data);
                        ajax_sent = false;
                        if(!data.error) {
                            var tmp = '<tr class="groupe-'+data.id_groupe+'"><td class="id_groupe">' + data.id_groupe
                                    + '</td><td>' + data.titre + '</td><td>'
                                    + '<a href="#" data-element-id="'+data.id_groupe+'" class="delete_link"><:ecatalogue:delete:></a>'
                                    + '</td></tr>';
                            if($("#groupes .empty").length) {
                                $("#groupes").empty();
                            }
                            $("#add_groupe_btn").css("display", "none");
                            $("#groupes").append(tmp);
                            $(".add_groupe option[value='"+data.id_groupe+"']").remove();
                        } else {
                            alert(data.error);
                        }
                    }
                );
            }
        });

    });
    </script>
    
    <form method='post' action='#ENV{action}' id="ecatalogue_property_form">
        <div>
			#ACTION_FORMULAIRE{#ENV{action}}
            #SET{groupes_ids, #ARRAY}
            #SET{rubriques_ids, #ARRAY}



            <table style="text-align:center; width: 100%;">
                <tbody id="groupes">
                <BOUCLE_rg(ECATALOGUE_RUBRIQUES_GROUPES){id_rubrique=#ID_RUBRIQUE }>
                    <BOUCLE_groupes(ECATALOGUE_GROUPES){id_groupe=#ID_GROUPE}{par num titre}>
                    #SET{groupes_ids, #GET{groupes_ids}|push{#ID_GROUPE}}
                    <tr class="groupe-#ID_GROUPE">
                        <td class="id_groupe">
                            #ID_GROUPE
                        </td>            
                        <td>
                            #TITRE
                        </td>
                        <td> 
                            <a href="#" data-element-id="#ID_GROUPE" class="delete_link"><:ecatalogue:delete:></a>
                        </td> 
            	    </tr>
                    </BOUCLE_groupes>
                    <tr class="empty"><td><:ecatalogue:no_groupes:></td></tr>
                    <//B_groupes>
                </BOUCLE_rg>
                    <tr class="empty"><td><:ecatalogue:no_groupes:></td></tr>
                <//B_rg>
                </tbody>
            </table>
            <p class='boutons' style="overflow: auto ">
                <select class="add_groupe" style="width: 70%;float: left; ">
                    <option value="add"><:ecatalogue:select_groupe:></option>
                    <BOUCLE_groupes2(ECATALOGUE_GROUPES){id_groupe !IN #GET{groupes_ids} }>
                    <option value="#ID_GROUPE">#TITRE</option>
                    </BOUCLE_groupes2>
                </select>
                <input type="button" id="add_groupe_btn" value="<:ecatalogue:add_groupe:>" style="display: none" />
            </p>

		</div>
    </form>
    
</div>